'use client';

import React from 'react';
import { Tag, Button } from 'antd';
import { 
  UserOutlined, 
  ClockCircleOutlined, 
  EyeOutlined 
} from '@ant-design/icons';
import { useRouter } from 'next/navigation';

interface TaskCategory {
  id: number;
  name: string;
  imageUrl: string;
  description: string;
}



interface Task {
  id: number;
  title: string;
  content: string;
  status: string;
  points: number;
  viewCount: number;
  createdAt: string;
  category: TaskCategory;
  author: {
    id: number;
    nickname: string;
    avatar: string;
  };
  applications: Array<{
    id: number;
    applicant: {
      id: number;
      nickname: string;
    };
  }>;
}

interface TaskItemProps {
  task: Task;
  onTaskClick?: (taskId: number) => void;
}

const TaskItem: React.FC<TaskItemProps> = ({ task, onTaskClick }) => {
  const router = useRouter();

  // 获取状态标签
  const getStatusTag = (status: string) => {
    const statusMap = {
      PENDING: { color: 'orange', text: '待审核' },
      APPROVED: { color: 'blue', text: '已通过' },
      REJECTED: { color: 'red', text: '已拒绝' },
      IN_PROGRESS: { color: 'green', text: '执行中' },
      COMPLETED: { color: 'purple', text: '已完成' },
      ADMIN_CONFIRMED: { color: 'cyan', text: '管理员已确认完成' },
      PUBLISHER_CONFIRMED: { color: 'green', text: '发布者已确认完成' },
    };
    const config = statusMap[status as keyof typeof statusMap] || { color: 'default', text: status };
    
    // 为"执行中"状态添加特殊样式
    if (status === 'IN_PROGRESS') {
      return (
        <Tag 
          color={config.color}
          className="text-xs font-bold px-2 py-1 border-2 border-green-500 shadow-lg animate-pulse"
        >
          {config.text}
        </Tag>
      );
    }
    
    return <Tag color={config.color} className="text-xs">{config.text}</Tag>;
  };

  // 格式化时间
  const formatTime = (time: string) => {
    const date = new Date(time);
    return date.toLocaleString('zh-CN');
  };

  // 处理任务点击
  const handleTaskClick = () => {
    if (onTaskClick) {
      onTaskClick(task.id);
    } else {
      router.push(`/tasks/${task.id}`);
    }
  };

  // 处理作者点击
  const handleAuthorClick = (e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发任务点击
    window.open(`/profile/${task.author.id}`, '_blank');
  };

  return (
    <div
      className="border-b border-gray-100 last:border-b-0 hover:bg-gray-50 transition-colors duration-200 cursor-pointer"
      onClick={handleTaskClick}
    >
      <div className="p-6">
        <div className="flex items-start justify-between">
          {/* 左侧内容 */}
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-2">
              <Tag color="blue" className="text-xs">
                {task.category.name}
              </Tag>
              {getStatusTag(task.status)}
            </div>
            <h3 className="text-lg font-normal text-gray-900 mb-2 line-clamp-1">
              {task.title}
            </h3>
            <p className="text-gray-600 text-sm line-clamp-2 mb-3">
              {task.content.replace(/<[^>]*>/g, '')}
            </p>
            <div className="flex items-center gap-6 text-xs text-gray-500">
              <div className="flex items-center">
                <img 
                  src={task.author.avatar || '/default-avatar.png'} 
                  alt={task.author.nickname}
                  className="w-5 h-5 rounded-full mr-2 object-cover cursor-pointer hover:opacity-80 transition-opacity"
                  onClick={handleAuthorClick}
                  onError={(e) => {
                    const target = e.target as HTMLImageElement;
                    target.src = '/default-avatar.png';
                  }}
                />
                <button
                  onClick={handleAuthorClick}
                  className="text-blue-600 hover:text-blue-800 hover:underline cursor-pointer"
                >
                  {task.author.nickname}
                </button>
              </div>
              <div className="flex items-center">
                <ClockCircleOutlined className="mr-1" />
                {formatTime(task.createdAt)}
              </div>
              <div className="flex items-center">
                <EyeOutlined className="mr-1" />
                {task.viewCount} 浏览
              </div>
              {task.applications.length > 0 && (
                <div className="text-cyan-600">
                  已有 {task.applications.length} 人报名
                </div>
              )}
            </div>
          </div>
          
          {/* 右侧积分 */}
          <div className="flex-shrink-0 ml-6 text-right">
            <div className="text-xl font-medium text-cyan-500 mb-1">
              {task.points}
            </div>
            <div className="text-xs text-gray-500">积分</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TaskItem; 